<template>
  <div>
    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-button v-show="isCollapse" @click="openLeft" type="primary" icon="el-icon-edit" circle></el-button>
      <el-button v-show="!isCollapse" @click="closeLeft" type="success" icon="el-icon-check" circle></el-button>
      <el-menu-item index="1" class="menuItem">
        <i class="el-icon-discount"></i>
        <span slot="title"><router-link to="/">首页</router-link></span>
      </el-menu-item>
      <el-menu-item index="2" class="menuItem">
        <i class="el-icon-present"></i>
        <span slot="title">主菜单1</span>
      </el-menu-item>
      <el-submenu index="3" class="menuItem">
        <template slot="title">
          <i class="el-icon-shopping-bag-1"></i>
          <span>主菜单2</span>
        </template>
        <el-menu-item-group>
          <el-menu-item class="menuItemGrop" index="1-1">子菜单1</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-2">子菜单2</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-3">子菜单3</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-4">子菜单4</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-5">子菜单5</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="4" class="menuItem">
        <i class="el-icon-document"></i>
        <span slot="title">主菜单3</span>
      </el-menu-item>
      <el-menu-item index="5" class="menuItem">
        <i class="el-icon-orange"></i>
        <span slot="title">主菜单4</span>
      </el-menu-item>
      <el-menu-item index="6" class="menuItem">
        <i class="el-icon-setting"></i>
        <span slot="title">主菜单5</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "LeftMenu",
  components: {},
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    openLeft() {
      this.isCollapse = false;
    },
    closeLeft() {
      this.isCollapse = true;
    }
  }
};
</script>

<style scoped>
.menuItem {
  text-align: left;
}

.menuItemGrop {
  font-size: 13px;
}

</style>